<style>
  body {
    position: absolute;
    margin: 0;
    padding: 0;
    width: 1280px;
    height: 720px;
    background: url(images/index-bg.jpg);
    background-color: transparent;
  }

  #main-0 {
    position: absolute;
    left: 50px;
    top: 140px;
  }

  #main-0 .item {
    position: absolute;
    background: url(images/loading-placeholder.png) repeat;
  }

  #main-0 img {
    width: 100%;
    height: 100%;
  }

  #main-0-0 {
    width: 452px;
    height: 310px;
  }

  #main-0-1,
  #main-0-2 {
    width: 226px;
    height: 310px;
  }

  #main-0-1 {
    left: 472px;
  }

  #main-0-2 {
    left: 718px;
  }

  #main-0-3,
  #main-0-4 {
    left: 964px;
    width: 215px;
    height: 145px;
  }

  #main-0-4 {
    top: 165px;
  }

  #main-1 {
    position: absolute;
    left: 45px;
    top: 470px;
  }

  #main-1 .item {
    position: absolute;
    width: 170px;
    height: 210px;
  }

  #main-1 #main-1-0 {
    background: url(images/page1-0.png);
  }

  #main-1 #main-1-1 {
    background: url(images/page1-1.png);
  }

  #main-1 #main-1-2 {
    background: url(images/page1-2.png);
  }

  #main-1 #main-1-3 {
    background: url(images/page1-3.png);
  }

  #main-1 #main-1-4 {
    background: url(images/page1-4.png);
  }

  #main-1 #main-1-5 {
    background: url(images/page1-5.png);
  }

  #main-1 #main-1-6 {
    background: url(images/page1-6.png);
  }

  #main-1 #main-1-0.focus,
  #main-1 #main-1-1.focus,
  #main-1 #main-1-2.focus,
  #main-1 #main-1-3.focus,
  #main-1 #main-1-4.focus,
  #main-1 #main-1-5.focus,
  #main-1 #main-1-6.focus {
    background-position: -170px 0;
  }

  #main-1 #main-1-1 {
    left: 170px;
  }

  #main-1 #main-1-2 {
    left: 340px;
  }

  #main-1 #main-1-3 {
    left: 510px;
  }

  #main-1 #main-1-4 {
    left: 680px;
  }

  #main-1 #main-1-5 {
    left: 850px;
  }

  #main-1 #main-1-6 {
    left: 1020px;
  }
</style>


<div id="main-0">
  <div id="main-0-0" class="item item-focus"></div>
  <div id="main-0-1" class="item item-focus"></div>
  <div id="main-0-2" class="item item-focus"></div>
  <div id="main-0-3" class="item item-focus"></div>
  <div id="main-0-4" class="item item-focus"></div>
</div>
<div id="main-1">
  <div id="main-1-0" class="item"></div>
  <div id="main-1-1" class="item"></div>
  <div id="main-1-2" class="item"></div>
  <div id="main-1-3" class="item"></div>
  <div id="main-1-4" class="item"></div>
  <div id="main-1-5" class="item"></div>
  <div id="main-1-6" class="item"></div>
</div>


<script>
  function _init() {
    renderClass();
    renderSubject();
    onFocus();
    getLog({
      programId: TYPEIDS.MAIN2,
      programName: '国宝随心看',
      ctype: '1',
      account: USERID,
      usermac: MAC,
      platform: '1'
    })
  }

  _init()

  function renderClass() {
    var data = getTypeListByTypeId({
      TYPEID: TYPEIDS.LOOK
    }).TYPEs
    for (var i = 0, l = data.length; i < l; i++) {
      $('#main-1-' + i).css('background-image', 'url(' + data[i].typePicture[0].picPath3 + ')')
    }
  }

  function renderSubject() {
    subjects = getTypeListByTypeId({
      TYPEID: TYPEIDS.MAIN2
    }).TYPEs
    for (var i = 0; i < subjects.length; i++) {
      $('#main-0-' + i).html('<img src="' + subjects[i].typePicture[0].picPath2 + '"/>')
    }
  }

  function keyUp() {
    if (loading) return;
    var index = area[focusArea].index;
    freeFocus()
    switch (focusArea) {
      case 1:
        break;
      case 2:
        if (index == 4) {
          area[focusArea].index = 3;
        } else if (index == 3) {
          focusArea = 1;
        } else {
          focusArea = 0;
        }
        break;
      case 3:
        focusArea = 2;
        if (index >= 0 && index <= 2) {
          area[focusArea].index = 0;
        } else if (index == 3) {
          area[focusArea].index = 1;
        } else if (index == 4 || index == 5) {
          area[focusArea].index = 2;
        } else if (index == 6) {
          area[focusArea].index = 4;
        }
        break;
    }
    onFocus();
  }

  function keyDown() {
    if (loading) return;
    var index = area[focusArea].index;
    freeFocus();
    switch (focusArea) {
      case 0:
        focusArea = 2;
        area[focusArea].index = 0
        break;
      case 1:
        focusArea = 2;
        area[focusArea].index = 3;
        break;
      case 2:
        if (index == 0) {
          focusArea = 3;
          area[focusArea].index = 1;
        } else if (index == 1) {
          focusArea = 3;
          area[focusArea].index = 3;
        } else if (index == 2) {
          focusArea = 3;
          area[focusArea].index = 4;
        } else if (index == 3) {
          area[focusArea].index = 4;
        } else if (index == 4) {
          focusArea = 3;
          area[focusArea].index = 6
        }
        break;
    }
    onFocus();
  }

  function keyLeft() {
    if (loading) return;
    var index = area[focusArea].index;
    freeFocus()
    switch (focusArea) {
      case 0:
        renderMain(0)
        break;
      case 1:
        if (index == 0) {
          focusArea = 0;
          renderMain($('#nav .nav-item').length - 1)
        } else {
          area[focusArea].index--;
        }

        break;
      case 2:
        if (index > 0 && index != 4) {
          area[focusArea].index--;
        } else if (index == 4) {
          area[focusArea].index = 2;
        }
        break;
      case 3:
        if (index > 0) {
          area[focusArea].index--;
        }
        break;
    }
    onFocus();
    // window.location.href = PANDA_PATH + 'index.html'


  }

  function keyRight() {
    if (loading) return;
    var index = area[focusArea].index;
    freeFocus();
    switch (focusArea) {
      case 0:
        renderMain(2)
        break;
      case 2:
        if (index != 3 && index != 4) {
          if ($('#' + area[focusArea].id + index).length > 0) {
            area[focusArea].index++;
          }
        }
        break;
      default:
        index++;
        if ($('#' + area[focusArea].id + index).length > 0) {
          area[focusArea].index++;
        }
        break;
    }
    onFocus();
  }

  function keyEnter() {
    if (loading) return;
    isNeed = 1;
    var index = area[focusArea].index;
    var form = PANDA_PATH + "index.html?AREA=" + focusArea + "&INDEX=" + area[focusArea].index + '&HEADER=' + area[0]
      .index;
    switch (focusArea) {
      case 1:
        if (index == 0) {
          GY.addUrl(PANDA_PATH + 'search.html', form);
        } else if (index == 1) {
          GY.addUrl(PANDA_PATH + 'favorite.html', form);
        } else if (index == 2) {
          GY.addUrl(PANDA_PATH + 'history.html', form);
        }
        break;
      case 2:
        var _sitcom = getVodListByTypeId({
          TYPEID: subjects[index].typeId
        }).data[0];
        programGoUrl(_sitcom, form);
        break;
      case 3:
        GY.addUrl(PANDA_PATH + 'panda-class.html?NAV=' + index, form);
        break;
    }
  }
</script>

</html>